import React, {useEffect, useState,useReducer} from 'react';
import {View, Text, StyleSheet, Image, ScrollView} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import {RootState} from '@/models/index';
import {connect, ConnectedProps} from 'react-redux';
import {IRecommends} from '../../models/recommends';
import Touchable from '../../components/Touchable';
import IconFont from '../../assets/iconfont';
import {getHeight} from "../../utils";
import Toast from 'react-native-root-toast';
const mapStateToProps = ({recommends, loading}: RootState) => {
  return {
    recommends1: recommends?.recommends,
    // 在触发getGoodsList方法时加上加载效果
    loading: loading.effects['recommends/getRecommendsList'],
  };
};
const connector = connect(mapStateToProps);
// 获取映射出来的props的类型，给IProps做定义
type ModelState = ConnectedProps<typeof connector>;
interface IProps extends ModelState {
  navigation: {navigate: any};
  route:any
}

const RecommendPackage = (props: IProps) => {
  const { dispatch,navigation,route} = props;
  const [recommends,setRecommend] = useState<IRecommends[]>([]);
  const [ignored, forceUpdate] = useReducer(x => x + 1, 0);
  function handleClick() {
  forceUpdate();
  }
  useEffect(() => {
    // 推荐默认获取全部的数据
    dispatch({
      type: 'recommends/getRecommendsList',
      payload:{
        callback:(data:IRecommends[]) => {
          console.log("data111",data);
          const arr = route.params.user_id && data.filter(i => {
            return i.owner_id === route.params.user_id 
          });
          console.log("arr",arr);
          setRecommend(arr);
        }
      }
    });
  }, [ignored]);
  const hanldeItem = (item:IRecommends) => {
    console.log('点击了Item');
    navigation.navigate("RecommendInfo",{
      item: item
    });
  };
  const handleAdd = () => {
    console.log("add");
    navigation.navigate("AddRecommend",{
      user_id:route.params.user_id && route.params.user_id,
      handleClick:handleClick
    })
  }
  const handleDelete = (recommend_id:string) => {
    dispatch({
      type: 'recommends/deleteRecommend',
      payload: {
        formData:{
          recommend_id:recommend_id
        },
        callback: () => {
          console.log("route.params.handleClick",route.params.handleClick)
          handleClick && handleClick()
            Toast.show('删除套餐成功', {
                position: Toast.positions.CENTER,
                duration: Toast.durations.LONG,
                shadow: true,
                animation: true,
              });
        },
      },
    });
  }
  return (
    <View style={styles.recommend11}>
        <ScrollView style={styles.bottom}>
         <View style={styles.bottom1}>
         {recommends &&
            JSON.stringify(recommends) !== '[]' &&
            recommends.map(i => {
              return (
                <Touchable
                  key={i._id}
                  style={styles.rItem}
                  onPress={()=>{hanldeItem(i)}}>
                  {i.recommend_images[0].r_url && (
                    <Image
                      source={{uri: i.recommend_images[0].r_url}}
                      style={styles.image}
                    />
                  )}
                 <View style={styles.row}>
                 <Text style={styles.text}>
                    {i.recommend_title && i.recommend_title.length > 15
                      ? `${i.recommend_title.substring(0, 15)}...`
                      : i.recommend_title}
                  </Text>
                  <Touchable onPress={()=>{handleDelete(i._id)}}>
                  <IconFont
                    name="icon-shanchu"
                    size={24}
                    color={'black'}></IconFont>
                  </Touchable>
                 </View>
                </Touchable>
              );
            })}
            
         </View>
        </ScrollView>
        <Touchable style={styles.btnBox} onPress={handleAdd}>
            <IconFont
                    name="icon-tianjiatianchong"
                    size={80}
                    color={'#A75E5E'}></IconFont>
            </Touchable>
    </View>
  );
};
const styles = StyleSheet.create({
  recommend11: {
    flex: 1,
    position:"relative"
  },
  bottom: {
    flex: 1,
    padding: 20,
  },
  bottom1:{
    marginBottom:50,
    
  },
  rItem: {
    flex: 1,
    marginVertical: 10,
    backgroundColor:"#fff",
    borderRadius: 15,
    shadowColor: '#000',
    shadowOffset: {
      width: 5,
      height: 7,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
  row:{
    display:"flex",
    flexDirection:"row",
    alignItems:"center"
  },
  image: {
    width: '100%',
    height: 180,
    borderTopLeftRadius:15,
    borderTopRightRadius:15,
  },
  text: {
    fontSize: 18,
    fontWeight: '700',
    color: 'black',
    padding:10,
  },
  btnBox:{
    position:"absolute",
    right:0,
    top:0
  }
});
export default connector(RecommendPackage);
